<template>
  <div>
    <el-row style="margin-bottom:10px">
      <el-input v-model="query" clearable placeholder="请输入页面名称" style="width: 200px; margin-left:455px;" size="mini" class="filter-item" @keyup.enter.native="toQuery" />
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
    </el-row>
    <el-table
      :data="data"
      style="width: 100%"
      @row-click="selectRow">
      <el-table-column
        prop="page_home"
        label="页面名称">
        <template slot-scope="scope">
          <el-radio
            v-model="radio"
            :label="scope.row.page_id"
            @change="change(scope.row)">
            {{ scope.row.page_title }}
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="page_img" label="页面预览图" align="center">
        <!-- 图片的显示 -->
        <template slot-scope="scope">
          <el-image :src="scope.row.preview_url" style="width: 40px; height: 40px" fit="cover" @click.native="preview(scope.row.preview_url)"/>
        </template>
      </el-table-column>
    </el-table>
    <viewImg ref="viewImg" :modal="isModal" />
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      background
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange" />
    <div
      slot="footer"
      class="dialog-footer"
      style="margin-left:600px">
      <el-button
        size="small"
        @click="cancel">取消</el-button>
      <el-button
        :loading="loading"
        type="primary"
        size="small"
        @click="doSubmit">确认</el-button>
    </div>
  </div>
</template>

<script>
import viewImg from '@/views/chaomall/system/pageDecoration/viewImg'
import initData from '@/mixins/initData'
export default {
  components: { viewImg },
  mixins: [initData],
  props: {
    rowData: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    }
  },
  data() {
    return {
      radio: '',
      query: '',
      shelfList: {},
      isModal: false
    }
  },
  watch: {
    rowData: {
      handler(newValue, oldValue) {
        this.radio = newValue.p_id
      },
      deep: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.radio = this.rowData.p_id
    })
  },
  methods: {
    preview(row) {
      console.log(row)
      const imgData = { classify: 2, url: row }
      this.$refs.viewImg.data = imgData
      this.$refs.viewImg.dialog = true
      console.log(imgData)
    },
    beforeInit() {
      this.showButton = false
      this.url = 'api/get-page-list'
      const sort = 'create_time,desc'
      const query = this.query
      this.params = { page: this.page, size: this.size, sort: sort }
      if (query) { this.params['page_title'] = query }
      return true
    },
    change(e) {
      this.shelfList = { p_id: e.page_id, p_name: e.page_title, type: 7 }
    },
    /* 触发父组件取消事件 */
    cancel() {
      this.$emit('fun', false)
    },
    /* 触发父组件确定事件 */
    doSubmit() {
      this.$emit('submit', this.shelfList)
    },
    /* 刷新页面 */
    refresh() {
      this.query = ''
      this.page = 0
      this.init()
    },
    selectRow(e) {
      this.shelfList = { p_id: e.page_id, p_name: e.page_title, type: 7 }
      this.radio = e.page_id
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
